import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardBaseComponent } from './card-base.component';
import { VCard11Component } from './v-card11.component';
import { VCard12Component } from './v-card12.component';
import { VCard13Component } from './v-card13.component';

@Component({
  selector: 'app-v-card02',
  standalone: true,
  template: `
    <div #element class="card w-full border-2 border-solid bg-white">
      {{ touch }}
      <div class="card-body">
        <div class="card-actions justify-center items-center">
          <h2 class="card-title font-mono">VCard 0-2 (Default)</h2>
          <button class="btn" (click)="checking = !checking">Click</button>
        </div>
        <div class="flex flex-row justify-between w-full space-x-4">
          <app-v-card11 [obj]="obj">[V02]</app-v-card11>
          <ng-content select="[card1]" />
          <app-v-card12 [obj]="obj">[V02]</app-v-card12>
          <ng-content select="[card2]" />
          <app-v-card13 [obj]="obj">[V02]</app-v-card13>
        </div>
      </div>
    </div>
  `,
  styles: [],
  imports: [CommonModule, VCard11Component, VCard12Component, VCard13Component],
})
export class VCard01Component extends CardBaseComponent {
  @Input() obj: { title: string } = { title: '' };
  checking = false;
}
